<script setup>
import { onMounted, ref } from "vue";
import { add, children, detail, modify, tree } from "@/api/sys/menu.js";
import FormDrawer from "@/views/sys/menu/components/form-drawer.vue";
import { FORM_MODE } from "@/common/index.js";
import PureTableBar from "@/components/RePureTableBar/src/bar.jsx";

onMounted(() => {
  loadMenuTree();
  loadMenuTable(undefined);
});
const menuTreeData = ref([]);
const tableColumns = [
  { prop: "title", label: "菜单名称", align: "center", minWidth: 120 },
  { prop: "menuType", label: "菜单类型", align: "center", width: 80 },
  { prop: "path", label: "路由路径", width: 150 },
  { prop: "component", label: "组件路径", width: 150 },
  { prop: "permission", label: "权限标识", width: 120 },
  { prop: "rank", label: "排序", align: "center" },
  { prop: "hiddenTag", label: "隐藏", align: "center", slot: "hiddenTag" },
  { label: "操作", slot: "operation", align: "center", width: 200 }
];
const defaultFormDrawerData = {
  id: undefined,
  parentId: "0",
  menuType: "MENU",
  path: undefined,
  name: undefined,
  redirect: null,
  title: undefined,
  icon: undefined,
  showLink: 1,
  rank: 1,
  component: undefined,
  extraIcon: undefined,
  showParent: 0,
  keepAlive: 0,
  frameSrc: undefined,
  frameLoading: 1,
  hiddenTag: 0,
  fixedTag: 0,
  activePath: undefined,
  enterTransition: undefined,
  leaveTransition: undefined,
  buttonList: []
};
const menuTableData = ref([]);
const formDrawerVisible = ref(false);
const formDrawerData = ref({ ...defaultFormDrawerData });
const formDrawerMode = ref(FORM_MODE.DETAIL);
const loading = ref(false);

const loadMenuTree = async () => {
  const { code, data } = await tree();
  if (code) {
    menuTreeData.value = data;
  }
};

const loadMenuTable = async id => {
  loading.value = true;
  try {
    const { code, data } = await children(id);
    if (code) {
      menuTableData.value = data;
    }
  } finally {
    loading.value = false;
  }
};

const loadMenuDetail = async id => {
  const { code, data } = await detail(id);
  if (code) {
    formDrawerData.value = data;
  }
};

const onTreeMenuNodeClick = (data, node) => {
  loadMenuTable(data.id);
};

const onDetailClick = (row) => {
  loadMenuDetail(row.id);
  formDrawerVisible.value = true;
  formDrawerMode.value = FORM_MODE.DETAIL;
};

const onModifyClick = (row) => {
  loadMenuDetail(row.id);
  formDrawerVisible.value = true;
  formDrawerMode.value = FORM_MODE.MODIFY;
};

const onAddClick = () => {
  formDrawerData.value = {
    ...defaultFormDrawerData,
    buttonList: [
      {
        name: undefined,
        permission: undefined,
        rank: 1
      }
    ]
  };
  formDrawerVisible.value = true;
  formDrawerMode.value = FORM_MODE.ADD;
};

const addMenu = async () => {
  formDrawerData.value.id = undefined
  await add(formDrawerData.value);
};

const modifyMenu = async () => {
  if (!formDrawerData.value.id) {
    return;
  }
  await modify(formDrawerData.value);
};

const submitForm = async data => {
  if (formDrawerMode.value === FORM_MODE.ADD && !data.id) {
    await addMenu();
  }
  if (formDrawerMode.value === FORM_MODE.MODIFY && !!data.id) {
    await modifyMenu();
  }
  formDrawerVisible.value = false;
};
</script>

<template>
  <div>
    <div class="flex">
      <el-card class="w-56 mr-4">
        <el-tree default-expand-all :expand-on-click-node="false" :data="menuTreeData"
                 :props="{label: (data) => data.meta.title}"
                 @node-click="onTreeMenuNodeClick" />
      </el-card>
      <el-card class="w-full">
        <pure-table-bar
          @refresh="loadMenuTable"
          :columns="tableColumns">
          <template #buttons>
            <el-button type="primary" @click="onAddClick">新增</el-button>
          </template>
          <template v-slot="{ size, dynamicColumns }">
            <pure-table
              :loading="loading"
              :size="size"
              :columns="dynamicColumns"
              :data="menuTableData"
              border
              adaptive
              align-whole="center"
              showOverflowTooltip
              table-layout="auto">
              <template #hiddenTag="{ row }">
                <el-tag v-if="row.hiddenTag" type="danger">隐藏</el-tag>
                <el-tag v-else type="success">显示</el-tag>
              </template>
              <template #operation="{ row }">
                <el-space>
                  <el-link type="primary" @click="onDetailClick(row)">详情</el-link>
                  <el-link type="warning" @click="onModifyClick(row)">编辑</el-link>
                  <el-link type="danger">删除</el-link>
                </el-space>
              </template>
            </pure-table>
          </template>
        </pure-table-bar>
      </el-card>
    </div>
    <form-drawer v-model="formDrawerData"
                 v-model:visible="formDrawerVisible"
                 :mode="formDrawerMode"
                 @submit="submitForm" />
  </div>
</template>

<style scoped lang="scss">

</style>
